<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>单据统计</title>
    <style>
        body{
            background-image: url(../images/1.png);
            background-repeat:no-repeat;
            background-attachment:fixed;
            background-size:100% 100%;
        }
    </style>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../js/echarts.js"></script>
</head>
<body>
<div id="left" style="width: 600px;height:400px;float: left;"></div>
<div id="right" style="width: 600px;height:400px;float: right;"></div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['layer'], function () {
        let $ = layui.jquery;

        let myChart = echarts.init(document.getElementById('left'));
        let days = [];
        let money = [];
        $.ajax({
            url: '/statistics?action=statisticsByYearIN',
            async: false,
            success: function (result) {
                if (result) {
                    for (let i = 0; i < result.length; i++) {
                        days.push(result[i].orYear);
                        money.push(result[i].count);
                    }
                }
            }
        });
        // 指定图表的配置项和数据
        let option = {
            color: [
                '#e60898',
            ],
            textStyle: {
                color: 'rgba(9,68,220,0.75)',
            },
            title: {
                text: '年入库量'
            },
            tooltip: {},
            legend: {
                data: ['单位（kg）'],

            },
            xAxis: {
                data: days
            },
            yAxis: {},
            series: [
                {
                    name: '入库总量',
                    type: 'line',
                    data: money,
                    smooth: true,
                    color: '#ed0b0b',
                },
                {
                    name: '入库总量',
                    type: 'bar',
                    data: money,
                }
            ]
        };
        myChart.setOption(option);

        let myChart1 = echarts.init(document.getElementById('right'));
        let days1 = [];
        let money1 = [];
        $.ajax({
            url: '/statistics?action=statisticsByYearOUT',
            async: false,
            success: function (result) {
                if (result) {
                    for (let i = 0; i < result.length; i++) {
                        days1.push(result[i].orYear);
                        money1.push(result[i].count);
                    }
                }
            }
        });
// 指定图表的配置项和数据
        let option1 = {
            color: [
                'rgba(147,239,10,0.82)',
            ],
            textStyle: {
                color: 'rgba(17,11,206,0.84)',
            },
            title: {
                text: '年出库量'
            },
            tooltip: {},
            legend: {
                data: ['单位（kg）'],
            },
            xAxis: {
                data: days1
            },
            yAxis: {},
            series: [
                {
                    name: '出库总量',
                    type: 'line',
                    data: money1,
                    smooth: true,
                    color: '#ba1414',
                },
                {
                    name: '出库总量',
                    type: 'bar',
                    data: money1,
                }
            ]
        };
        myChart1.setOption(option1);



    });// end layui


</script>
</body>
</html>
